<template>
    <div class="s-aside">
        <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#3D4AE7" text-color="#fff" active-text-color="#fff" :default-openeds="['1']">
            <el-submenu index="1">
                <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>问卷中心</span>
                </template>
                <el-menu-item-group style="overflow: hidden;">
                    <el-menu-item index="1-1" @click="handleClick('/question/new')">新建问卷</el-menu-item>
                    <el-menu-item index="1-2" @click="handleClick('/question/manage')">问卷管理</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
        </el-menu>
    </div>
</template>
<script>
export default {
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClick(val) {
            this.$router.push(val)
        }
    }
}
</script>
<style lang="less" scoped>
.s-aside {
  width: 100%;
  height: 800px;
  background-color: #3a4af0;
  border-radius: 16px;
  color: #ffffff;
  padding: 100px 0;
  .el-menu {
    border-right: none;
    .el-menu-item-group > ul {
      overflow: hidden;
    }
  }
}
</style>
